<template>
  <div class="tadd">
    <div class="name">
      <div class="input" v-for="(val,i) in data" :key="i">
        <!--输入框-->
        <template v-if="Input(val.type)">
          <div class="text">
            <label class="title" :for="val.name">{{val.word}}</label>
            <input class="type_flex" :type="val.type" :id="val.name" v-model="val.val">
          </div>
        </template>
        <!--下拉框-->
        <template v-else-if="val.type === 'select'">
          <div class="select">
            <label class="title" :for="val.name">{{val.title}}</label>
            <select class="type_flex" :name="val.name" :id="val.name" v-model="val.val">
              <option :value="item" v-for="(item,key) in val.word">{{key}}</option>
            </select>
          </div>
        </template>
        <!--单选框-->
        <template  v-else-if="val.type === 'radio'">
          <div class="radio">
            <span class="title">{{val.title}}</span>
            <template v-for="(item,key,index) in val.word ">
              <input :name="val.name" type="radio" :id="val.name+item" v-model="val.val" :value="item">
              <label :for="val.name+item">{{key}}</label>
            </template>
          </div>
        </template>
        <!--文本框-->
        <template v-else-if="val.type === 'textarea'">
          <div class="textarea">
            <span class="title">{{val.word}}</span>
            <textarea v-model="val.val" class="type_flex"></textarea>
          </div>
        </template>
      </div>
    </div>
    <footer class="button_box">
      <button @click="sub" class="su_bottom" ref="sub">确定</button>
      <button @click="clone" class="cl_button">取消</button>
    </footer>
  </div>
</template>

<script>
    export default {
       name: "TAdd",
       props:['data'],//[{name:名,id:id,val:val}],[{name:[名],id:id.val:val}]
       methods:{
         //判断input的类型
         Input(type){
           return type === 'input'|| type === 'number' || type === undefined
         },
         clone(){
           this.$emit('hide');
         },
         sub(){
           let data = {};
           this.data.forEach(function(val){
             data[val.name] = val.val;
           })
           this.$emit('sub',data,this.$refs.sub);
         }
       },
       filters:{
       },
    }
</script>

<style scoped lang="scss">
  $label_width:1.5rem;
  $font:.3rem;
  $color:#327cef;
  @mixin text_justify{
    text-align: justify;
    text-align-last: justify;
  }
  .title{
    width:$label_width;
    display: inline-block;
    @include text_justify;
    margin-right: .2rem;
  }
  .type_flex{
    flex:1;
    border: .01rem solid #cccbcb;
    padding: .1rem .12rem;
  }
  .tadd {
    position: absolute;
    z-index: 11;
    background: #fff;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: .4rem .6rem;
    font-size:$font;
    .input{
      > div{
        margin-bottom:$font;
      }
      .textarea,.select,.text{
        display: flex;
        input:focus,textarea:focus{
          border-color:$color;
          box-shadow:0 0 .1rem .01rem $color;
        }
      }
      .radio{
        label:before{
          content:'';
          display: inline-block;
          width: $font;
          height: $font;
          border: .01rem solid #888585;
          border-radius:50%;
          margin:0 .2rem;
        }
        label:first-of-type:before{
          margin:0 .2rem 0 0;
        }
        input:checked+label:before{
          background: #327cef;
          border: .04rem #eee solid;
          box-shadow: 0 0 0.08rem 0.01rem #327cef;
          width: .26rem;
          height: .26rem;
        }
      }
      textarea{
        height: 1.5rem;
      }
    }
    .button_box{
      margin-top: .8rem;
      text-align: center;
      button{
        border: none;
        padding: .1rem .8rem;
        border-radius: .04rem;
        color: #fff;
        font-size:$font;
      }
      .su_bottom{
        background: $color;
        margin-right: .4rem;
      }
      .cl_button{
        background: #a0a0a0;
      }
    }
  }
</style>
